<template>
  <a-layout>
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo"></div>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
        <a-menu-item key="AdminIndex">
          <home-outlined />
          <span class="nav-text">后台首页</span>
        </a-menu-item>
        <a-menu-item key="ExamManage">
          <calendar-outlined />
          <span class="nav-text">考试安排管理</span>
        </a-menu-item>
        <a-menu-item key="PaperManage">
          <paper-clip-outlined />
          <span class="nav-text">试卷管理</span>
        </a-menu-item>
        <a-menu-item key="UserManage">
          <user-outlined />
          <span class="nav-text">用户管理</span>
        </a-menu-item>
        <a-menu-item key="AdminManage">
          <borderless-table-outlined />
          <span class="nav-text">管理员管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header :style="{ background: '#fff', padding: 0 }" />
      <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
        <div :style="{ padding: '10px', background: '#fff' }">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }"> YunExam ©2021 Created by FanHua </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  HomeOutlined,
  CalendarOutlined,
  PaperClipOutlined,
  UserOutlined,
  BorderlessTableOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { computed, defineComponent } from "vue";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();

    const selectedKeys = computed({
      get: () => {
        return [route.name];
      },
      set: (item) => {
        router.push({ name: item[0] });
      },
    });

    return {
      selectedKeys,
    };
  },
  components: {
    BorderlessTableOutlined,
    UserOutlined,
    PaperClipOutlined,
    HomeOutlined,
    CalendarOutlined,
  },
});
</script>
<style>
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.site-layout .site-layout-background {
  background: #fff;
}

.site-layout .site-layout-background {
  background: #141414;
}
</style>
